<template>
  <el-form-item label="鼠标移入样式">
    <el-radio-group v-model="editorForm.hover.isDefault" @change="handleDefault">
      <el-radio :label="true">默认</el-radio>
      <el-radio :label="false">自定义</el-radio>
    </el-radio-group>
    <div v-if="!editorForm.hover.isDefault" class="custom-next">
      <div class="padding-setting">
        <div v-if="editorForm.hover.hasOwnProperty('color')" class="padding-item">
          <span>字体颜色：</span>
          <el-color-picker show-alpha v-model="editorForm.hover.color" @change="backUpdate" />
        </div>
        <div v-if="editorForm.hover.hasOwnProperty('backgroundColor')" class="padding-item">
          <span>背景色：</span>
          <el-color-picker show-alpha v-model="editorForm.hover.backgroundColor" @change="backUpdate" />
        </div>
        <div v-if="editorForm.hover.hasOwnProperty('borderColor')" class="padding-item">
          <span>边框颜色：</span>
          <el-color-picker show-alpha v-model="editorForm.hover.borderColor" @change="backUpdate" />
        </div>
      </div>
      <div v-if="editorForm.hover.hasOwnProperty('background')" class="hover-background">
        <span>背景图片：</span>
        <div class="form-img" @click="handleUploadImg">
          <div class="has-img" v-if="editorForm.hover.background">
            <img :src="editorForm.hover.background" alt="" />
            <span @click.stop="handleRemoveImg">
              <el-icon>
                <Delete />
              </el-icon>
            </span>
          </div>
          <el-icon v-else>
            <Plus />
          </el-icon>
        </div>
      </div>
    </div>
    <FilesUpload v-model:showDialog="showImageUpload" :limit="1" @getFileList="handleGetCoverImg" />
  </el-form-item>
</template>

<script setup>
import { inject, ref } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'

const { editorForm, backUpdate, changeDefault } = inject('commonForm')

const handleDefault = () => {
  changeDefault('hover')
  backUpdate()
}

// 图片设置
const showImageUpload = ref(false)
const handleUploadImg = () => {
  showImageUpload.value = true
}

const handleGetCoverImg = imgList => {
  if (imgList.length === 0) return
  editorForm.value.hover.background = imgList[0].url
  backUpdate()
}

// 移除图片
const handleRemoveImg = () => {
  editorForm.value.hover.background = ''
  backUpdate()
}
</script>

<style lang="scss" scoped>
.hover-background {
  padding-left: 15px;
  font-size: 12px;
  color: #606266;
}
</style> 